<template>
    <div class="concentration_conter ">
        <h3 style="font-size: 18px;">为你推荐</h3>
        <van-list class="concentration_box" v-model="loading" @load="onLoad" offset="100">
            <div class="item_wrapper">
                <div class="concentration_item" v-for="(item, index) in waterfallStatus" :key="index">
                    <router-link to="/Detail">
                        <img class="big_img" :src="item.picUrl" alt="">
                        <div class=" concentration_title">
                            <img class=" sml_img" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png"
                                alt="">
                            <span class="title">吸水快，包裹强，2毫米豆腐细砂</span>
                        </div>
                        <div class="concentration_price">
                            <span class="currentprice">{{ item.activityPrice }}</span>
                            <span class="originalcost">{{ item.originPrice }}</span>
                        </div>
                        <div class="bigbox">
                            <div class="smlbox">限时购</div>距结束1天
                        </div>
                    </router-link>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script  setup lang='ts'>
// 引入
import { ref, onMounted, watch } from 'vue';
import { getHomeWaterFall, type activityModuleType } from '../../api/home'

// 动态数据包裹
let loading = ref(true)
let time = ref(Date.now())
let waterfallStatus = ref<activityModuleType[]>([])
let flag = true
// 生命周期钩子
onMounted(() => {
    homeWatarStatus()
})
// 监听
watch(waterfallStatus, () => {
    // loading.value = false
})
// 自定义方法
const onLoad = () => {
    if (loading.value) {
        console.log('已经触底')
        homeWatarStatus()
    }
}
// 请求函数
const homeWatarStatus = async () => {
    if (loading.value) {
        loading.value = false
        try {
            const result = await getHomeWaterFall(time.value)
            if (result.code == 200) {
                waterfallStatus.value.push(...result.data.data.indexActivityModule)
            }
            console.log(waterfallStatus.value)
            loading.value = true
        } catch (error) {
            console.log(error)
        }

    }

}
</script>

<style scoped lang="less">
.concentration_conter {
    padding: 0 10px;

    h3 {
        font-size: 26px;
    }

    .concentration_box {
        display: flex;
        flex-direction: column;

        .item_wrapper {
            display: flex;
            flex-wrap: wrap;

            justify-content: space-between;

            .concentration_item {
                width: 172.5px;
                height: 302.5px;

                .big_img {
                    width: 100%;
                    border-radius: 16px;
                }

                .concentration_title {
                    margin-top: 0.12rem;
                    line-height: .4rem;
                    text-align: left;
                    font-size: .28rem;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    color: #12161c;
                    font-family: PingFangSC-Regular;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    word-break: break-all;

                    .sml_img {
                        margin-right: 0.1rem;
                        vertical-align: -3PX;
                        height: 15px;
                    }
                }

                .concentration_price {
                    height: 30px;

                    .currentprice {
                        font-size: 16px;
                        color: red;
                        margin-right: 10px;
                    }

                    .originalcost {
                        font-size: 12px;
                        text-decoration: line-through;
                        color: #999b9d;
                    }
                }

                .bigbox {
                    width: 100%;
                    height: 23px;
                    display: flex;
                    background: #ffe9eb;
                    font-size: 12px;
                    line-height: 23px;
                    border-radius: 10px;
                    color: red;
                    font-weight: bold;
                    margin-top: 10px;

                    .smlbox {
                        background: red;
                        border-radius: 10px;
                        margin-right: 10px;
                        color: #eee;
                        font-weight: bold;
                        padding: 0 5px;
                    }
                }
            }
        }

    }
}
</style>